<%@ page import="bean.User" %>
<%@ page import="bean.Order" %>
<%@ page import="java.util.List" %>
<%@ page import="service.impl.OrderServiceImpl" %>
<%@ page import="service.impl.CinemaServiceImpl" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.sql.Timestamp" %>
<%@ page import="util.DataTypeConversion" %><%--
  Created by IntelliJ IDEA.
  User: Peter Zhou
 
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f2f2f2;
        }
        body {
            background-image: url('../img/ui/beijing2.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed; /* 可选，使背景图片固定不动 */
        }

        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            opacity: 0.8;
        }

        .order {
            border-bottom: 1px solid #e0e0e0;
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .order:last-child {
            border-bottom: none;
        }

        .order-details {
            display: flex;
            align-items: center;
        }

        .order-img {
            width: 100px;
            height: 150px;
            margin-right: 20px;
            border-radius: 5px;
            overflow: hidden;
        }

        .order-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .order-info {
            flex-grow: 1;
        }

        .order-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .order-description {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
            width: 300px; /* 设置每行的宽度 */
            overflow-wrap: break-word; /* 在单词内部断行 */
        }

        .order-price {
            font-weight: bold;
            font-size: 18px;
            color: #f60;
        }

        .order-status {
            font-size: 16px;
        }

        .order-actions {
            display: flex;
            align-items: center;
        }

        .order-action {
            margin-right: 10px;
            padding: 5px 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            color: #333;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .order-action:hover {
            background-color: #f5f5f5;
        }

        .pagination {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        .pagination button {
            margin: 0 5px;
            padding: 10px 20px;
            border: none;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .pagination button:hover {
            background-color: #0056b3;
        }

        .pagination button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<% User user = (User)request.getSession().getAttribute("user");
if(user==null){
    request.setAttribute("message","您还没有登录");
    request.setAttribute("page","login.jsp");
    request.getRequestDispatcher("alert.jsp").forward(request,response);
}
    OrderServiceImpl orderService = new OrderServiceImpl();
    List<Order> orderList = orderService.getOrderListByUserId(user.getId());
    CinemaServiceImpl cinemaService = new CinemaServiceImpl();
    Timestamp now = new Timestamp(System.currentTimeMillis());
%>
<body>
<div class="container">
    <%for (Order order:orderList){
        Timestamp startTime = order.getScreeningSchedule().getStartTime();
        Date endTime =  order.getScreeningSchedule().getEndTime();
        String startTimeStr = DataTypeConversion.conversionUtilDateToString(startTime);
        String endTimeStr = DataTypeConversion.conversionUtilDateToString(endTime);
        Timestamp  startTimestamp = Timestamp.valueOf(startTimeStr);
        Timestamp  endTimestamp = Timestamp.valueOf(endTimeStr);
    %>
    <div class="order">
        <div class="order-details">
            <div class="order-img">
                <img src="../img/movie/<%=order.getScreeningSchedule().getMovie().getImg()%>" alt="Order Image">
            </div>
            <div class="order-info">
                <div class="order-title"><%=order.getScreeningSchedule().getMovie().getName()%></div>
                <div class="order-description"><%=cinemaService.getCinemaById(order.getScreeningSchedule().getVideoHall().getCinemaId()).getName()%>
                    <%=order.getScreeningSchedule().getVideoHall().getName()%>免费3小时停车
                    <%=order.getOrderDate()%></div>
                <div class="order-price">¥<%=order.getTotal()%></div>
            </div>
        </div>
        <%if(now.before(startTimestamp)){%>
        <div class="order-status">未完成</div><%}%>
        <%if(now.after(startTimestamp)&&now.before(endTimestamp)){%>
        <div class="order-status">进行中</div><%}%>
        <%if(now.after(endTimestamp)){%>
        <div class="order-status">已结束</div><%}%>

        <div class="order-actions">
            <div class="order-action"><a href="order_details.jsp" onclick="getOrderId(<%=order.getId()%>)" style="color: black; text-decoration: none;">查看详情</a></div>
            <div class="order-action"><button type="button" onclick="getOrderIdToCancelOrder(<%=order.getId()%>)">退票</button></div>
         </div>
</div><%}%>
</div>
    </div>

<div class="pagination">
    <button id="prevPage">上一页</button>
    <button id="nextPage">下一页</button>
</div>

<script>
    let currentPage = 1;
    const itemsPerPage = 4; // 每页显示的订单数量
    const orders = document.querySelectorAll('.order');

    function showPage(pageNumber) {
        for (let i = 0; i < orders.length; i++) {
            if (i >= (pageNumber - 1) * itemsPerPage && i < pageNumber * itemsPerPage) {
                orders[i].style.display = 'flex';
            } else {
                orders[i].style.display = 'none';
            }
        }
        document.getElementById('prevPage').disabled = pageNumber === 1;
        document.getElementById('nextPage').disabled = pageNumber === Math.ceil(orders.length / itemsPerPage);
    }

    function goToNextPage() {
        if (currentPage < Math.ceil(orders.length / itemsPerPage)) {
            currentPage++;
            showPage(currentPage);
        }
    }

    function goToPrevPage() {
        if (currentPage > 1) {
            currentPage--;
            showPage(currentPage);
        }
    }
    function getOrderId(orderId){
       var xhr =  new XMLHttpRequest();
        xhr.open("post","get_orderId",true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            // ... 省略了之前的 readyState 检查 ...
            if (xhr.readyState === 4) {
                if (xhr.status === 200) { // 检查响应状态码是否为200（成功）
                    console.log("请求已完成,且响应已就绪");

                    // 这里可以处理服务器的响应，或者进行页面刷新等操作
                    // 例如，您可能想要更新页面的某个部分，而不是整个页面刷新
                    // 如果确实需要页面刷新或跳转到另一个页面，可以在这里设置 window.location
                } else {
                    console.error("请求失败，状态码：" + xhr.status);
                }
            }
        };
       xhr.send("orderId="+orderId);
    }
    function getOrderIdToCancelOrder(orderId){
        var xhr =  new XMLHttpRequest();
        xhr.open("post","get_orderId_to_cancel_order",true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            // ... 省略了之前的 readyState 检查 ...
            if (xhr.readyState === 4) {
                if (xhr.status === 200) { // 检查响应状态码是否为200（成功）
                    console.log("请求已完成,且响应已就绪");

                    location.reload();
                    alert(`${cancelOrderMessage}`);
                    // 这里可以处理服务器的响应，或者进行页面刷新等操作
                    // 例如，您可能想要更新页面的某个部分，而不是整个页面刷新
                    // 如果确实需要页面刷新或跳转到另一个页面，可以在这里设置 window.location
                } else {
                    console.error("请求失败，状态码：" + xhr.status);
                }
            }
        };
        xhr.send("orderId="+orderId);
    }

    document.getElementById('nextPage').addEventListener('click', goToNextPage);
    document.getElementById('prevPage').addEventListener('click', goToPrevPage);

    showPage(currentPage);
</script>
</body>
</html>
